<template>
  <aside class="sidebar">
    <div
      class="sidebar-heading border-bottom py-4 text-center"
      style="border: none"
    >
      NURTRAIN
    </div>

    <el-menu
      ref="studentMenu"
      default-active="$route.path"
      class="list-group list-group-flush"
      style="border: none"
      text-color="#212529"
      border="none"
      active-text-color="#0d6efd"
      @select="handleMenuClick"
      router
      v-if="isStudent"
    >
      <el-menu-item index="/student/student-dashboard" label="学生仪表盘">
        <i class="bi bi-speedometer2 me-2"></i>
        <span> 学生仪表盘 </span>
      </el-menu-item>
      <el-menu-item index="/student/course-list" label="课程中心">
        <i class="bi bi-book me-2"></i>
        <span> 课程中心 </span>
      </el-menu-item>
      <el-menu-item index="/student/learning-center" label="学习中心">
        <i class="bi bi-laptop me-2"></i>
        <span> 学习中心 </span>
      </el-menu-item>
      <el-menu-item index="/student/student-assessment-plus" label="考核评估">
        <i class="bi bi-clipboard-check me-2"></i>
        <span>考核评估</span></el-menu-item
      >
      <el-menu-item index="/student/student-training-plan" label="培养计划">
        <i class="bi bi-gear me-2"></i>
        <span> 培养计划 </span>
      </el-menu-item>
      <el-sub-menu index="/community-group">
        <template #title>
          <i class="bi bi-people me-2"></i>
          <span>培训社区</span>
        </template>
        <el-menu-item index="/community" label="社区广场">
          <i class="bi bi-square-half me-2"></i>
          <span>社区广场</span>
        </el-menu-item>
        <el-menu-item index="/my-posts" label="我的发帖">
          <i class="bi bi-pencil-square me-2"></i>
          <span>我的发帖</span>
        </el-menu-item>
        <el-menu-item index="/message-center" label="我的消息">
          <i class="bi bi-envelope me-2"></i>
          <el-badge
            :value="unreadMessagesCount"
            :hidden="unreadMessagesCount === 0"
            class="item"
          >
            <span>我的消息</span>
          </el-badge>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>

    <el-menu
      ref="adminMenu"
      default-active="$route.path"
      class="list-group list-group-flush"
      background-color="#f8f9fa"
      text-color="#212529"
      active-text-color="#0d6efd"
      @select="handleMenuClick"
      router
      v-if="isAdmin"
    >
      <el-menu-item index="/admin/admin-dashboard" label="管理员仪表盘">
        <i class="bi bi-speedometer2 me-2"></i>
        <span> 管理员仪表盘 </span>
      </el-menu-item>
      <el-menu-item index="/admin/admin-assessment" label="评估管理">
        <i class="bi bi-clipboard-check me-2"></i>
        <span> 考核管理 </span>
      </el-menu-item>
      <el-menu-item index="/admin/admin-course" label="课程管理">
        <i class="bi bi-book me-2"></i>
        <span> 课程管理 </span>
      </el-menu-item>
      <el-menu-item index="/admin/log" label="日志管理">
        <i class="bi bi-journal-text me-2"></i>
        <span> 日志管理 </span>
      </el-menu-item>
      <el-menu-item index="/admin/user" label="用户管理">
        <i class="bi bi-people me-2"></i>
        <span> 用户管理 </span>
      </el-menu-item>
      <el-menu-item index="/community" label="社区广场">
        <i class="bi bi-people me-2"></i>
        <span>社区广场</span>
      </el-menu-item>
    </el-menu>
    <el-menu
      ref="teacherMenu"
      default-active="$route.path"
      class="list-group list-group-flush"
      background-color="#f8f9fa"
      text-color="#212529"
      active-text-color="#0d6efd"
      @select="handleMenuClick"
      router
      v-if="isTeacher"
    >
      <el-menu-item index="/teacher/teacher-dashboard" label="教师仪表盘">
        <i class="bi bi-speedometer2 me-2"></i>
        <span> 教师仪表盘 </span>
      </el-menu-item>
      <el-menu-item index="/teacher/teacher-course" label="课程管理">
        <i class="bi bi-book me-2"></i>
        <span> 课程管理 </span>
      </el-menu-item>
      <el-menu-item index="/teacher/teacher-assessment" label="考核管理">
        <i class="bi bi-clipboard-check me-2"></i><span> 考核管理 </span>
      </el-menu-item>
      <el-sub-menu index="/community-group">
        <template #title>
          <i class="bi bi-people me-2"></i>
          <span>培训社区</span>
        </template>
        <el-menu-item index="/community" label="社区广场">
          <i class="bi bi-square-half me-2"></i>
          <span>社区广场</span>
        </el-menu-item>
        <el-menu-item index="/my-posts" label="我的发帖">
          <i class="bi bi-pencil-square me-2"></i>
          <span>我的发帖</span>
        </el-menu-item>
        <el-menu-item index="/message-center" label="我的消息">
          <i class="bi bi-envelope me-2"></i>
          <el-badge
            :value="unreadMessagesCount"
            :hidden="unreadMessagesCount === 0"
            class="item"
          >
            <span>我的消息</span>
          </el-badge>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </aside>
</template>

<script setup>
import { useUserStore } from "@/stores/user.js"; // 引入 Pinia store
import { headerMsgs } from "@/stores/headerMsg.js";
import { ref } from "vue";
import { onMounted, computed } from "vue";
import { useForumStore } from "@/stores/forum.js";
import { storeToRefs } from "pinia";

const userStore = useUserStore();
const headerMsg = headerMsgs();
const forumStore = useForumStore();
// 使用 storeToRefs 获取响应式的 messages 数组
const { messages } = storeToRefs(forumStore);

// 计算未读消息的数量
const unreadMessagesCount = computed(() => {
  if (!messages.value) return 0;
  return messages.value.filter((m) => m.message.isRead === 0).length;
});
const isStudent = userStore.isStudent;
const isTeacher = userStore.isTeacher;
const isAdmin = userStore.isAdmin;

const studentMenu = ref(null);
const teacherMenu = ref(null);
const adminMenu = ref(null);

const menuLabels = {
  "/student/student-dashboard": "学生仪表盘",
  "/student/course-list": "课程中心",
  "/student/learning-center": "学习中心",
  "/student/student-assessment": "考核评估",
  "/student/student-training-plan": "培养计划",
  "/teacher/teacher-dashboard": "教师仪表盘",
  "/teacher/teacher-course": "课程管理",
  "/teacher/teacher-assessment": "考核管理",
  "/teacher/teacher-student": "学生管理",
  "/admin/admin-dashboard": "管理员仪表盘",
  "/admin/admin-assessment": "评估管理",
  "/admin/admin-course": "课程管理",
  "/admin/log": "日志管理",
  "/admin/user": "用户管理",
  "/admin/admin-training-plan": "培养计划管理",
  "/message-center": "消息中心",
  "/community": "培训社区",
};
// 当侧边栏组件被创建时，立即获取所有消息
onMounted(() => {
  forumStore.fetchMessages({ pageSize: -1 });
});
const handleMenuClick = (index, indexPath, item) => {
  console.log("Raw item object:", item);
  const title = menuLabels[index];
  if (title) {
    console.log("Menu Item clicked: ", item);
    console.log("Index clicked: ", index);
    headerMsg.setHeaderTitle(title); // 更新标题
  } else {
    console.warn("Menu item label not found for index:", index, item);
  }
};
</script>

<style scoped>
.sidebar {
  /* 使用更柔和、专业的渐变色 */
  background: linear-gradient(180deg, #87CEEB 0%, #4682B4 100%);
  width: 100%;
  height: 100vh;
  padding: 0;
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1);
  transition: width 0.3s ease;
}

.sidebar-heading {
  padding: 20px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.el-menu {
  background-color: transparent !important;
  border: none !important;
}

.el-menu-item,
:deep(.el-sub-menu__title) {
  color: rgba(255, 255, 255, 0.85) !important;
  height: 50px;
  line-height: 50px;
  transition: all 0.3s ease;
  border-radius: 8px; /* 为悬停效果添加圆角 */
  margin: 4px 10px; /* 增加边距，让悬停效果更明显 */
  width: calc(100% - 20px);
}

.el-menu-item i,
:deep(.el-sub-menu__title i) {
  color: rgba(255, 255, 255, 0.85) !important;
  margin-right: 10px;
}

/* --- 悬停效果 --- */
.el-menu-item:hover,
:deep(.el-sub-menu__title:hover) {
  background-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 添加阴影 */
  transform: translateY(-2px); /* 轻微上浮 */
}

/* --- 激活效果 --- */
.el-menu-item.is-active {
  background-color: #3d7bad !important; /* 更深的蓝色背景 */
  color: #ffffff !important; /* 白色文字 */
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0, 91, 150, 0.4); /* 激活时的阴影 */
  border-right: 4px solid #ffffff; /* 使用白色边框，对比更强烈 */
}

.el-menu-item.is-active i,
.el-menu-item.is-active span {
   color: #ffffff !important; /* 确保图标和文字都是白色 */
}

/* 子菜单样式 */
:deep(.el-menu--inline) {
  background-color: rgba(0, 0, 0, 0.15) !important;
  border-radius: 6px; /* 为子菜单也添加圆角 */
  margin: 0 10px;
  width: calc(100% - 20px);
}
/* 修复子菜单项的宽度和边距 */
:deep(.el-menu--inline .el-menu-item) {
    width: 100%;
    margin: 0;
    border-radius: 0;
}
</style>